<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="实时报警监控" name="realtime">
        <RealtimeAlarm />
      </el-tab-pane>
      <el-tab-pane label="报警处理工作台" name="handle">
        <HandleWorkbench />
      </el-tab-pane>
      <el-tab-pane label="历史报警查询" name="history">
        <HistoryQuery />
      </el-tab-pane>
      <el-tab-pane label="预警分析报表" name="analysis">
        <AnalysisReport />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RealtimeAlarm from './components/RealtimeAlarm.vue'
import HandleWorkbench from './components/HandleWorkbench.vue'
import HistoryQuery from './components/HistoryQuery.vue'
import AnalysisReport from './components/AnalysisReport.vue'

const activeTab = ref('realtime')

const handleTabChange = (name) => {
  console.log('切换到标签页:', name)
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>

